<template>
	<div v-if="relevanceFormKey">
		<div v-for="(item, index) in list" :key="index" class="item">
			<el-checkbox v-model="item.checked" @change="change" style="margin-right: 10px" />
			<div style="width: 150px">{{ item.columnTitle }}</div>
			别名：<el-input placeholder="选填，导入数据的标题" v-model="item.aliasTitle" clearable style="width: 200px" />
		</div>
		<div v-if="schema.body[0].fields.length">
			关联表查询（用于判断数据是否存在，右侧请勿填写）
			<div style="width:800px;margin-top:20px">
				<preview ref="previewRef" :previewConfig="{ schema }" />
			</div>
		</div>
		<span style="color: red">{{ errorTips }}</span>
	</div>
</template>
<script setup name='Relevance'>
	import preview from "@/views/tool/view/index.vue";
	import {getConditionsFields} from "@/utils/amisUtil.js";
	const { proxy } = getCurrentInstance();
	const emits = defineEmits(["setJson"]);
	const props = defineProps({
			relevanceFormKey: {
				type: String,
				defulat: "",
			},
			formColumns: {
				type: Object,
				defulat: () => {},
			},
			primaryKeyFieldObj: {
				type: Object,
				defulat: () => {},
			},
			relevance: {
				type: Object,
				defulat: () => {},
			},
		}),
		primaryKey = $ref(""),
		list = $ref([]),
		schema = $ref({
			type: "form",
			name: "conditionsForm",
			data: {},
			debug: false,
			wrapWithPanel: false,
			body: [{
				type: "condition-builder",
				name: "conditions",
				builderMode: "simple",
				showANDOR: true,
				fields: [],
			}, ],
		}),
		errorTips = $ref("");
		
	watch(
		() => props.relevanceFormKey,
		(newVal, oldVal) => {
			if (newVal) {
				primaryKey = newVal + '__' + props.primaryKeyFieldObj[newVal]
				reset();
			}
		}
	);
	watch(
		() => props.formColumns,
		(newVal, oldVal) => {
			if (newVal && newVal[props.relevanceFormKey]) {
				reset();
			}
		}, {
			deep: true,
			immediate: true
		}
	);

	setTimeout(() => {
		reset();
		if (props.relevance && props.relevance.primaryKeyConditions) {
			schema.data.conditions = props.relevance.primaryKeyConditions;
		}
	}, 1000);

	function reset() {
		if (!props.formColumns[props.relevanceFormKey]) {
			return;
		}
		let objs = {};
		if (props.relevance && props.relevance.list && props.relevance.list.length) {
			props.relevance.list.forEach((item) => {
				objs[item.columnName] = item;
			});
		}
		list = props.formColumns[props.relevanceFormKey].map((item) => {
			return {
				columnName: item.columnName,
				columnTitle: item.columnTitle,
				aliasTitle: objs[item.columnName] ? objs[item.columnName].aliasTitle : "",
				checked: objs[item.columnName] ? objs[item.columnName].checked : false,
			};
		});
		change();
	}

	function change() {
		schema.body[0].fields = [];
		let listArr = [];
		props.formColumns[props.relevanceFormKey].forEach((item, index) => {
			if (list[index].checked) {
				//&&list[index].columnName!=primaryKey
				listArr.push(item);
			}
		});
		setTimeout(() => {
			schema.body[0].fields = getConditionsFields(listArr);
		}, 500);
	}

	function submit() {
		if (!props.relevanceFormKey) {
			emits("setJson", {
				tabType: "relevance",
				formData: {},
			});
			return;
		}
		errorTips = "请至少勾选一个字段";
		list.some((item) => {
			if (item.checked) {
				errorTips = "";
				return true;
			}
		});
		if (!errorTips) {
			proxy.$refs['previewRef'].getValues("conditionsForm").then((res) => {
				if (res.conditions) {
					emits("setJson", {
						tabType: "relevance",
						formData: {
							list: list,
							primaryKeyConditions: res.conditions,
						},
					});
				} else {
					errorTips = "请配置关联表查询";
				}
			});
		}
	}

	defineExpose({
		submit,
	});
</script>
<style lang="scss" scoped>
	.item {
		width: 100%;
		float: left;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}
</style>